<!DOCTYPE html>
<html lang="zh_CN">
<head>
  <meta charset="UTF-8">
  <title><%= htmlWebpackPlugin.options.title %></title>
  <meta name=Keywords content="<%= htmlWebpackPlugin.options.keywords %>">
  <meta name=Description content="<%= htmlWebpackPlugin.options.description %>">
  <link rel="shortcut icon" href="//www.artup.com/img/logoMin.ico" type="images/x-icon" />
</head>
<body style="opacity:0;">
<div id="app">
  <unify-header></unify-header>
  <suspension class="suspend" ref="suspend" :show-height="showSuspensionHeight" @mouseleave="suspendPackUp">
    <div class="container">
      <div class="upper">
        <div class="wrapper">
          <label class="suspend-label">方画册</label>
          <label class="customization-item current"
                 @mouseover="suspendPullDown"
                 @click="suspendPullDown">主题：{{showIs?'未选择':productList[lineIndex].label}}</label>
          <label class="suspend-label">尺寸：250x250mm</label>
          <label class="suspend-label">页数：32页</label>
          <button class="customization-btn" @click="startCustom">开始定制</button>
        </div>
      </div>
      <div class="under">
        <div class="wrapper" style="padding-left:338px;">
          <div class="suspend-color-item"
               v-for="(item,index) in productList"
               :class="['background-'+item.category,{active:!showIs&&index===lineIndex}]"
               @click="checkColor(item)&&suspendPackUp()">
            <label>{{item.label}}</label>
          </div>
        </div>
      </div>
    </div>
  </suspension>
  <div class="wramp">
    <div id="banner">
      <div class="container">
        <div class="div_lf">
          <img v-if="showIs" src="http://image2.artup.com/static/pc/index/img/fanghuace/picture_album01.png" alt=""/>
          <img v-if="!showIs" :src="picturePrefix+oSrcImg" alt="">
        </div>
        <div class="div_rg">
          <h5>方画册</h5>
          <span>一切早已存在，只为记录旅途的感动</span>
          <span>一切早已存在，只为青葱岁月的激情</span>
          <span>一切早已存在，只为奉上一生的疼爱</span>
          <div class="size">
            <label>主题</label>
            <ol>
              <li class="checkColor"
                  v-for="(item,index) in productList"
                  :class="{lines:!showIs&&index===lineIndex}"
                  @click="checkColor(item)">{{item.label}}
              </li>
            </ol>
          </div>
          <div class="previews">
            <ul>
              <li>
                <label>尺寸</label>
                <div class="cont">
                  250 x 250mm
                </div>
              </li>
              <li>
                <label>页数</label>
                <div class="cont">
                  32页
                </div>
              </li>
            </ul>
          </div>
          <div class="pices">
            <i>{{price}} </i> RMB
          </div>
          <a href="javascript:;" @click="startCustom" class="purchasing">开始定制</a>
        </div>
      </div>
    </div>
    <section>
      <div class="picture_album1" ref="showSuspensionFlag">
        <div class="container">
          <div class="describe">
            <p class="font_ch">毕业季</p>
            <h5 class="font_en">GRADUATION TIME</h5>
            <span class="font_ch">致青春 珍藏纯真美好的同窗情谊</span>
            <span class="font_ch">致青春 回望未完待续的无悔青春</span>
          </div>
        </div>
      </div>
      <div class="picture_album2">
        <div class="container">
          <div class="cont_lf">
            <h5>YOUTH</h5>
            <p>定格一起走过的青葱岁月</p>
            <p>定制有关青春的共同回忆</p>
          </div>
        </div>
      </div>
      <div class="picture_album3">
        <div class="container">
          <div class="cont_rg">
            <h5>PASSION</h5>
            <p>珍藏单纯清澈的容颜与友爱</p>
            <p>共致永不散场的青春与梦想</p>
          </div>
        </div>
      </div>
    </section>
    <section>
      <div class="picture_album4">
        <div class="container">
          <div class="describe">
            <p>旅行记</p>
            <h5>TRAVEL NOTES</h5>
            <span>旅行的故事无须过多文字的赘述</span>
            <span>光影才是最好的讲述者</span>
          </div>
        </div>
      </div>
      <div class="picture_album5">
        <div class="container">
          <div class="cont_lf">
            <h5>TRAVEL TOGETHER</h5>
            <p>世界有绝美的风景 我有寻美的心情</p>
          </div>
        </div>
      </div>

      <div class="picture_album6">
        <div class="container">
          <div class="cont_rg">
            <h5>PASSION</h5>
            <p>珍藏单纯清澈的容颜与友爱</p>
            <p>共致永不散场的青春与梦想</p>
          </div>
        </div>
      </div>
    </section>

    <section>
      <div class="picture_album7">
        <div class="container">
          <div class="describe">
            <p>遇见.情缘</p>
            <h5>LOVE SRORY</h5>
            <span>与你携手相伴 已是此生幸福</span>
            <span>期待沿路风景 你我共享其中</span>
          </div>
        </div>
      </div>
      <div class="picture_album8">
        <div class="container">
          <div class="cont_lf">
            <h5>FALL IN LOVE</h5>
            <p>遇上爱情，栖息爱的港湾</p>
          </div>
        </div>
      </div>

      <div class="picture_album9">
        <div class="container">
          <div class="cont_rg">
            <h5>PASSION</h5>
            <p>真挚彼此的美好时光</p>
            <p>用光影编写出爱情永恒的故事</p>
          </div>
        </div>
      </div>
    </section>

    <div class="picture_album10">
      <div class="container">
        <div class="cont_rg">
          <h5>QUALITY</h5>
          <p>匠心工艺 重在品质</p>
          <span>书封采用烫金工艺 硬质感硬壳封面</span>
          <span>封面、封底照片 文字可任意定制</span>
          <span>方脊锁线精装，可180度平铺翻阅</span>
        </div>
      </div>
    </div>
  </div>
  <unify-footer></unify-footer>
</div>
</body>
</html>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-113376322-1"></script>
<script>
  window.dataLayer = window.dataLayer || []
  function gtag() {
    dataLayer.push(arguments)
  }
  gtag('js', new Date())

  gtag('config', 'UA-113376322-1')
</script>
